<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>手表</title>
    <style>
        .watch {
            --watch-color: white;
            --screen-color: black;
            font-size: 4.5vmin;
            font-family: monospace;
            color: #fff;
            padding: 2em 1.5em;
            border: 2px solid var(--watch-color);
            border-radius: 2em;
            box-shadow: inset 0 0 0 0.5em black,
                inset 0 0 1rem 1em hsl(0 0% 100% / 0.25);
            background-color: var(--screen-color);
            background-image: linear-gradient(to bottom right,
                    #fff0 50%,
                    hsl(0 0% 100% / 0.25));
            position: relative;
        }

        .watch::before,
        .watch::after {
            content: '';
            position: absolute;
            background-color: var(--watch-color);
            z-index: -1;
        }

        .watch::after {
            inset: -0.5em 20%;
            border-radius: 0.5em;
            background-image: linear-gradient(#fff0,
                    hsl(0 0% 0% / 0.5) 0.5em calc(100% - 0.5em),
                    #fff0);
        }

        .watch::before {
            inset: -50vh 25%;
            background-image: repeating-linear-gradient(#fff0 0 0.3em,
                    hsl(0 0% 0% / 0.125) 0.3em 0.5em,
                    #fff0 0.5em 0.8em),
                radial-gradient(circle, #fff0, hsl(0 0% 0% / 0.25) 50%);
        }

        .keyword {
            color: #ddca7e;
        }

        .def {
            color: #809bbd;
        }

        .operator {
            color: #cccccc;
        }

        .property {
            color: #9a8297;
        }

        .string {
            color: #96b38a;
        }

        .number {
            color: #d0782a;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 1em;
            min-height: 100vh;
            background-color: #1d1e22;
            display: grid;
            place-items: center;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="watch"></div>

    <script>
        clock();

        function clock() {
            const date = new Date();
            const indent = 2;
            const clockObj = {
                am_pm: date.getHours() >= 12 ? 'pm' : 'am',
                hours: date.getHours() % 12 || 12,
                minutes: date.getMinutes(),
                seconds: date.getSeconds(),
                day: date.toLocaleDateString('en-us', { weekday: 'long' }),
                date: date.getDate(),
                month: date.toLocaleDateString('en-us', { month: 'long' }),
                year: date.getFullYear(),
            };
            const entryFormat = ([key, val]) => {
                return `${'&nbsp'.repeat(
                    indent
                )}<span class="property">${key}</span>: ${valFormat(val)}`;
            };
            const valFormat = (val) => {
                if (typeof val == 'number')
                    return `<span class="number">${val}</span>`;
                else if (typeof val == 'string')
                    return `<span class="string">"${val}"</span>`;
            };
            document.querySelector('.watch').innerHTML = `
    <span class="keyword">const</span> <span class="def">clock</span> = {<br>
    ${Object.entries(clockObj).reduce(
                (str, entry) => str + entryFormat(entry) + ',<br>',
                ''
            )}};`;

            requestAnimationFrame(clock);
        }
    </script>
</body>

</html>